<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn1">查询</button>
  <button id="btn2">增加</button>
  <button id="btn3">修改</button>
  <button id="btn4">删除</button>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>
  const btn1 = document.getElementById('btn1');
  const btn2 = document.getElementById('btn2');
  const btn3 = document.getElementById('btn3');
  const btn4 = document.getElementById('btn4');

  // 查
  btn1.onclick = function () {
    axios.get('http://localhost:3000/student', { params: { id: 3 } }).then((mes) => {
      console.log(mes);
    }).catch((err) => {
      console.log(err);
    });
  }
  // 增
  btn2.onclick = function () {
    axios.post('http://localhost:3000/student', {
      "name": 'llj',
      "age": 24
    }).then((mes) => {
      console.log(mes.data);
    }).catch((err) => {
      console.log(err);
    });
  }
  // 改
  btn3.onclick = function () {
    axios.put('http://localhost:3000/student/6', {
      "name": 'laoli', "age": 24
    }).then((mes) => {
      console.log(mes.data);
    }).catch((err) => {
      console.log(err);
    });
  }
  // 删
  btn4.onclick = function () {
    axios.delete('http://localhost:3000/student/6').then((mes) => {
      console.log(mes.data);
    }).catch((err) => {
      console.log(err);
    });
  }
</script>

</html>